<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Image swap example</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" language="javascript" charset="utf-8" ></script>
	<script src="jquery.fadeImages.js" type="text/javascript" language="javascript" charset="utf-8" ></script>
	<style type="text/css" media="screen">
	/* <![CDATA[ */
*{margin:0;padding:0;font-family:arial,sans,sans-serif;background-color:#EEE}
h1{padding:100px 40px;}
	/* ]]> */
	</style>
	
	<script type="text/javascript" language="javascript" charset="utf-8">
	// <![CDATA[
	$(document).ready(function(){
		$("#fade").fadeImages({timeout:30, fadeDuration:500, initDelay:1000});
		$("#fade2").fadeImages({timeout:30, fadeDuration:500});
//  	$("div").fadeImages({timeout:30, fadeDuration:500});
	});
	// ]]>
	</script>
</head>
<body style="text-align:center;">
	<h1>Demo transition jQuery</h1>
	
	<div id="fade" style="margin:auto; height:208px; width:277px; border:0px solid #000;">
		<img src="img/jqDemo_1.png"/>
		<img src="img/jqDemo_2.png"/>
		<img src="img/jqDemo_3.png"/>
		<img src="img/jqDemo_4.png"/>
	</div>
	
	<div id="fade2" style="margin:auto; height:208px; width:277px; border:0px solid #000;">
		<img src="img/jqDemo_1.png"/>
		<img src="img/jqDemo_2.png"/>
		<img src="img/jqDemo_3.png"/>
		<img src="img/jqDemo_4.png"/>
	</div>
</body>
</html>
